<template>
	<div>
		<template>
			<el-table :data="rentalcarports" style="width: 100%">
				<el-table-column label="每小时单价" width="180">
					<template slot-scope="scope">
						<i class="el-icon-time"></i>
						<span style="margin-left: 10px">{{ scope.row.rentalCarportUnitPrice }}</span>
					</template>
				</el-table-column>
				<el-table-column label="开始时间" width="280">
					<template slot-scope="scope">
						<i class="el-icon-time"></i>
						<span style="margin-left: 10px">{{ scope.row.rentalCarportBeginTime }}</span>
					</template>
				</el-table-column>
				<el-table-column label="结束时间" width="280">
					<template slot-scope="scope">
						<i class="el-icon-time"></i>
						<span style="margin-left: 10px">{{ scope.row.rentalCarportEndTime }}</span>
					</template>
				</el-table-column>
				<el-table-column label="当前状态" width="280">
					<template slot-scope="scope">
						<span v-if="scope.row.rentalCarportStatus == 1" style="margin-left: 10px">正常</span>
						<span v-if="scope.row.rentalCarportStatus == 0" style="margin-left: 10px">已下架</span>
						<span v-if="scope.row.rentalCarportStatus == 2" style="margin-left: 10px">等待下架</span>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleInfo(scope.$index, scope.row)">查看被预定的信息</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除当前发布</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>

		<el-dialog title="提示" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
			<span>
			<template>
			  <el-table
			    :data="OccupiedTime"
			    stripe
			    style="width: 100%">
			    <el-table-column
			      prop="occupiedTimeBeginTime"
			      label="开始时间"
			      width="180">
			    </el-table-column>
			    <el-table-column
			      prop="occupiedTimeEndTime"
			      label="结束时间"
			      width="180">
			    </el-table-column>
			  </el-table>
			</template>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import $ from "jquery"
	export default {
		data() {
			return {
				dialogVisible: false,
				carportId: this.$route.params.carportId,
				OccupiedTime: [],
				rentalcarports: [],
			};
		},
		methods: {
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			//通过车位id查询到当前车位已经发布的订单信息
			open(carportId) {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/carport/carportdetail",
					type: "get",
					data: {
						"carportId": carportId
					},
					success: function(data) {
						_this.rentalcarports = data.res;
					}
				});
			},
			handleInfo(index, row) {
				console.log(index, row);
				var _this = this;
				$.ajax({
					url: "http://localhost:80/order/listOccupiedTimes",
					type: "get",
					data: {
						rentalCarportId: row.rentalCarportId,
					},
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						_this.dialogVisible = true;
						_this.OccupiedTime = data.res;
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});
			},
			handleDelete(index, row) {
				var _this = this;
				$.ajax({
					url: "http://localhost:80/carport/deleteRentalCar",
					type: "get",
					data: {
						rentalCarportId: row.rentalCarportId,
					},
					headers: {
						"Access-Token": sessionStorage.getItem("Access-Token")
					},
					success: function(data) {
						alert(data.message);
					},
					error: function(data) {
						alert(data.responseJSON.message)
					}
				});
			}
		},
		mounted() {
			this.open(this.carportId)
		}
	}
</script>

<style>
</style>
